<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu
                    :default-active="activeUrl"
                    class="el-menu-vertical-demo"
                    router
                >
                    <el-menu-item
                        index="/form"
                    >
                        <el-icon><SetUp /></el-icon>
                        <span>表单</span>
                    </el-menu-item>
                    <el-menu-item
                        index="/table"
                    >
                        <el-icon><Menu /></el-icon>
                        <span>表格</span>
                    </el-menu-item>
                    <el-menu-item
                        index="/page"
                    >
                        <el-icon><MoreFilled /></el-icon>
                        <span>其他</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const activeUrl = ref('/form')
watchEffect(() => {
    activeUrl.value = route.path
})
</script>

<style lang="scss" scoped>
.common-layout{
    :deep(.el-menu-vertical-demo){
        height: 100vh;
    }
    :deep(.el-main){
        height: 100vh;
        overflow-y: scroll;
    }
}
</style>